<template>
  <div class="box">
    <div class="header">
      <van-nav-bar title="订单" left-arrow @click-left="$router.back()" />
    </div>
    <div class="content">

      <van-swipe-cell v-for="item in store.orderList">
        <van-card
          :num="item.count"
          :price="item.price"
         
          :title="item.title"
      
          :thumb="item.image"
        />
      
      </van-swipe-cell>

      <van-submit-bar :price="3050" button-text="提交订单" @submit="onmit" />
    </div>

   <van-cell is-link title="基础用法" @click="show = true" />
<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />

      <!-- 骨架屏 -->
         <van-skeleton>
  <template #template>
    <div :style="{ display: 'flex', width: '100%' }">
      <van-skeleton-image />
      <div :style="{ flex: 1, marginLeft: '16px' }">
        <van-skeleton-paragraph row-width="60%" />
        <van-skeleton-paragraph />
        <van-skeleton-paragraph />
        <van-skeleton-paragraph />
      </div>
    </div>
  </template>
</van-skeleton>
  </div>
</template>

<script setup>
import request from "@/utils/request";
import { useCounterStore } from "@/stores/counter";
import shake from "@/utils/shake";
const store = useCounterStore();
import { ref } from 'vue';

   const show = ref(false);
  const actions = [
      { name: '支付宝' },
      { name: '微信' },
    
    ];
const onmit=shake(()=>{

 show.value=true
  let obj = {
    id: new Date().getTime(),
    title: "NO" + new Date().getTime(),
    price: store.totalPrice,
  };
  //生成订单
  store.addOrderList({
    ...obj,
    status:1,
    orderList: store.orderList,
  });
  //打开支付宝付款页面
  request
    .get("pay", {
      params: obj,
    })
    .then((res) => {
      if (res.data.code == 200) {
        window.location.href = res.data.data;
      }
    });
},1000)
</script>

<style lang="scss" scoped>
</style>